import Image from "next/image"
import Link from "next/link"
import { Play } from "lucide-react"
import { Button } from "@/components/ui/button"

// 模拟的专辑数据
const allAlbums = [
  {
    id: 1,
    title: "霸小天：秋中现祭（Xiaofu Ju - Waldeinsamkeit）",
    artist: "霸小天（Xiaofu Ju）",
    releaseDate: "2025-02-26",
    cover: "/placeholder.svg",
    region: "内地",
    language: "chinese",
    category: "流行",
    featured: true,
  },
  {
    id: 2,
    title: "你那边现在几点？",
    artist: "Vicky曾晨",
    releaseDate: "2025-02-26",
    cover: "/placeholder.svg",
    region: "内地",
    language: "chinese",
    category: "民谣",
    featured: true,
  },
  {
    id: 3,
    title: "惜惜念念",
    artist: "高伟光/雪瑶",
    releaseDate: "2025-02-26",
    cover: "/placeholder.svg",
    region: "内地",
    language: "chinese",
    category: "流行",
    featured: false,
  },
  {
    id: 4,
    title: "好好告别",
    artist: "韩宇文",
    releaseDate: "2025-02-26",
    cover: "/placeholder.svg",
    region: "内地",
    language: "chinese",
    category: "流行",
    featured: false,
  },
  {
    id: 5,
    title: "爱你 影视原声带",
    artist: "汪苏泷/顾人中/沐卡/冠祖晏/郭虎",
    releaseDate: "2025-02-26",
    cover: "/placeholder.svg",
    region: "内地",
    language: "chinese",
    category: "原声",
    featured: true,
  },
  {
    id: 6,
    title: "Midnights",
    artist: "Taylor Swift",
    releaseDate: "2022-10-21",
    cover: "/placeholder.svg",
    region: "欧美",
    language: "western",
    category: "流行",
    featured: true,
  },
  {
    id: 7,
    title: "BORN PINK",
    artist: "BLACKPINK",
    releaseDate: "2022-09-16",
    cover: "/placeholder.svg",
    region: "韩国",
    language: "japanese",
    category: "流行",
    featured: true,
  },
  {
    id: 8,
    title: "Harry's House",
    artist: "Harry Styles",
    releaseDate: "2022-05-20",
    cover: "/placeholder.svg",
    region: "欧美",
    language: "western",
    category: "流行",
    featured: false,
  },
  {
    id: 9,
    title: "Un Verano Sin Ti",
    artist: "Bad Bunny",
    releaseDate: "2022-05-06",
    cover: "/placeholder.svg",
    region: "其他",
    language: "other",
    category: "拉丁",
    featured: false,
  },
  {
    id: 10,
    title: "=",
    artist: "Ed Sheeran",
    releaseDate: "2021-10-29",
    cover: "/placeholder.svg",
    region: "欧美",
    language: "western",
    category: "流行",
    featured: false,
  },
]

interface AlbumGridProps {
  region?: string
  category?: string | null
  language?: string
  featured?: boolean
  limit?: number
}

export function AlbumGrid({ region = "全部", category = null, language, featured, limit }: AlbumGridProps) {
  // 根据条件筛选专辑
  let filteredAlbums = [...allAlbums]

  if (region !== "全部") {
    filteredAlbums = filteredAlbums.filter((album) => album.region === region)
  }

  if (category) {
    filteredAlbums = filteredAlbums.filter((album) => album.category === category)
  }

  if (language) {
    filteredAlbums = filteredAlbums.filter((album) => album.language === language)
  }

  if (featured !== undefined) {
    filteredAlbums = filteredAlbums.filter((album) => album.featured === featured)
  }

  // 如果有限制数量，则截取指定数量的专辑
  if (limit) {
    filteredAlbums = filteredAlbums.slice(0, limit)
  }

  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
      {filteredAlbums.map((album) => (
        <Link key={album.id} href={`/album/${album.id}`} className="group">
          <div className="relative aspect-square overflow-hidden rounded-md">
            <Image
              src={album.cover || "/placeholder.svg"}
              alt={album.title}
              width={300}
              height={300}
              className="object-cover transition-transform group-hover:scale-105"
            />
            <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
              <Button size="icon" variant="secondary" className="h-12 w-12">
                <Play className="h-6 w-6" />
              </Button>
            </div>
          </div>
          <div className="mt-3 space-y-1">
            <h3 className="font-medium line-clamp-2 group-hover:text-primary transition-colors">{album.title}</h3>
            <p className="text-sm text-muted-foreground line-clamp-1">{album.artist}</p>
            <p className="text-xs text-muted-foreground">{album.releaseDate}</p>
          </div>
        </Link>
      ))}
    </div>
  )
}

